<template>
  <div id="outer">
    <h1>我喜欢的电影列表</h1>
    <ul>
      <li v-for="movie in myMovieList" :key="movie.tvId">
        {{ movie.name }}
      </li>
      <!-- <li v-for="(movie, index) in movies" :key="index" v-show="movie" v-cloak>
        {{ movie }}
      </li> -->
    </ul>
    <br>
    <h1>你喜欢的电影</h1>
    <ul>
        <li v-for='movie in youMovieList' :key="movie.tvId">{{movie.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "Movie",
  computed: {
    // movies() {
    //   return this.$store.getters.myMovieList;
    // },
    ...mapGetters(['myMovieList']),
    youMovieList(){
        
        return this.$store.getters.youMovieList({n:4,m:7});
    }
  },
};
</script>

<style scoped>
#outer {
  width: 900px;
  margin: 0 auto;
  background-color: pink;
}
[v-cloak] {
  display: none;
}
</style>